<template>
	<view class="wrap">
		<view class="uni-inline-item">
			<text>状态:</text>
			<view class="banjiebox" v-if="repairData.bxStatus === '已办结'">
				<text>已办结</text>
				<navigator v-show="isShowPingjia" class="banjie" :url="'../evaluate/evaluate?id=' + reqData.id">评价</navigator>
			</view>
			<text v-else-if="repairData.bxStatus !== '已办结'">{{ repairData.bxStatus }}</text>
		</view>
		<view class="uni-inline-item">
			<text>审核意见</text>
			<text>{{repairData.shMsg || "暂无"}}</text>
		</view>
		<view class="uni-inline-item">
			<text>报修时间:</text>
			<text>{{ repairData.createTime }}</text>
		</view>
		<view class="uni-inline-item">
			<text>报修区域:</text>
			<text>{{ repairData.bxAreaName }}</text>
		</view>
		<view class="uni-inline-item">
			<text>报修设施:</text>
			<text>{{ repairData.bxItemName }}</text>
		</view>
		
		<view class="uni-inline-item">
			<text>维修工:</text>
			<text>{{ repairData.workerName ||'暂无'}}</text>
		</view>
		<view :class="repairData.workerPhoto?'pic':''">
			<view class="uni-title">维修工图片:</view>
			<view v-show="repairData.workerPhoto" class="uni-uploader__img" style="height: auto;"><image :src="repairData.workerPhoto" mode=""></image></view>
			<text v-show="!repairData.workerPhoto">暂无</text>
		</view>
		<view class="uni-inline-item">
			<text>故障描述:</text>
			<text>{{ repairData.bxContent ||'暂无'}}</text>
		</view>
		<view :class="repairData.imgs.length?'pic':''">
			<view class="uni-title">故障图片:</view>
			<view class="uni-uploader__img" style="height: auto;"><image v-for="val in repairData.imgs" :src="val.imgUrl" mode="" :key="val.imgUrl"></image></view>
			<text v-show="!repairData.imgs.length">暂无</text>
		</view>
		<view class="evaluateBox" v-show="repairData.bxStatus === '已办结' && !isShowPingjia">
			<view class="title">报修评价</view>
			<view class="liao" v-show="evaluateData" v-for="val in evaluateData" :key="val.createTime">
				<view class="liao_s">
					<text>报修人</text>
					<text>{{ neirongS[val.esStatus] }}</text>
				</view>
				<view class="con">{{ val.esContent }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		formatTimeToStr
	} from '@/components/date.js';
	export default {
		computed: {
			...mapState(['TOKEN', 'UPDATE', 'URL'])
		},
		data() {
			return {
				isShowPingjia: true,
				repairData: {
					bxAreaName: '西校区/越千年',
					bxItemName: '空调/空调滤芯',
					bxContent: '坏了',
					bxRoomnum: '502',
					bxStatus: '登记',
					bxUser: '打电话',
					createTime: '',
					id: '20190329153326939679995.3052262824',
					procInstId: null,
					userPhone: '1301821994',
					workerName: '王钢蛋',
					sh_msg:"",
					workerPhoto: '../../static/img/weixiurenyuan.png',
					imgs: [{
						imgUrl: '../../static/img/guzhangtu.png'
					}]
				},
				neirongS: {
					'0': '待审核',
					'1': '已通过',
					'2': '违规'
				},
				evaluateData: {},
				reqData: {
					id: ''
				}
			};
		},
		onShow() {
			console.log("是否跟新" + this.UPDATE);
			if (this.UPDATE) {
				this.getRepairData();
				this.TO_UPDATE(false);
			}
		},
		onLoad(e) {
			this.reqData.id = e.id;
			this.getRepairData();
		},
		methods: {
			...mapMutations(['TO_UPDATE']),
			getRepairData() {
				uni.request({
					url: this.URL + 'bx/getMyBxDetail',
					data: this.reqData,
					header: {
						token: this.TOKEN
					},
					success: res => {
						// console.log('=====' + JSON.stringify(res.data.data));
						console.log(res.data);
						this.repairData = res.data.data;
						this.repairData.createTime = formatTimeToStr(res.data.data.createTime, 'yyyy-MM-dd');
						if (this.repairData.bxStatus === '已办结') {
							this.getEvaluateData();
						}
					}
				});
			},
			getEvaluateData() {
				uni.request({
					url: this.URL + 'bxTEstimate/getListByMainId',
					data: {
						mainId: this.repairData.id
					},
					header: {
						token: this.TOKEN,
					},
					success: res => {
						console.log("获取评论" + res.data.data);
						if (res.data.data.length == 1) {
							this.isShowPingjia = false;
							this.evaluateData = res.data.data;
							console.log('按钮消失吧');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.wrap {
		box-sizing: border-box;
		padding: 20upx;
		overflow: hidden;

		.uni-inline-item {
			line-height: 80upx;
			border-bottom: 1upx solid #e5e5e5;

			text {
				min-width: 180upx;
				color: slategrey;

				&:nth-of-type(1) {
					color: black;
				}
			}

			.banjiebox {
				display: flex;
				justify-content: space-between;
				flex: 1;

				.banjie {
					background: #007aff;
					color: white;
					padding: 2px 10px;
					border-radius: 5px;
				}
			}
		}

		.pic {
			display: flex;
			flex-direction: column;
			width: 710upx;

			.uni-uploader__img {
				box-sizing: border-box;
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				image {
					margin: 18upx;
					width: 200upx;
					height: 200upx;
				}
			}
		}

		.evaluateBox {
			.title {
				font-size: 40upx;
				color: #6d6d72;
				text-align: center;
				border-bottom: 1upx solid slategrey;
			}

			.liao {
				padding-top: 20upx;
				width: 100%;

				text {
					border-bottom: 1upx solid #888888;
				}

				view {
					color: slategrey;
					padding: 0 40upx;
				}

				.liao_s {
					display: flex;
					justify-content: space-between;

					text:nth-of-type(2) {
						background: #007aff;
						padding: 0upx 10upx;
						border-radius: 10upx;
						color: white;
					}
				}

				.con {
					text-indent: 2em;
				}
			}

			.right {
				text-align: right;
			}
		}

		.evaluate {
			position: absolute;
			width: 100%;
			display: flex;
			height: 40px;
			left: 0px;

			input {
				padding-left: 10upx;
				background: #e5e5e5;
				height: 40px;
				flex: 4;
			}
		}
	}
</style>
